<template>
    <div class="popups-root" @click.stop="hide" v-if="isShow" :style="'opacity:' + opacity + ';'">
        <div class="content" @click.stop="() => { }" :style="curPopupsData.contentCss">
            <div class="return" v-if="curPopupsData.isReturn">
                <img @click="hide" class="image" src="@/static/icon/return.svg">
            </div>
            <div class="view" v-if="curPopupsData.isReturn">
                <component :is="curComponent"></component>
            </div>
            <div class="view-H" v-else>
                <component :is="curComponent"></component>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import path from '@/router/popups.js'

const isShow = ref(false);
const opacity = ref(0);
const duration = 300;
const curPopupsData = ref({
    curPosi: 0,//出现方式 
    curLangth: 100,//显示的长度
    contentCss: '',//控制出现方式的css
    isReturn: false,//是否出现返回栏
    langth: 0,
});

const curComponent = shallowRef(null);

//posi:出现方位[1:right,3:left]
//name:页面名称
//_isReturn:是否显示header
//langth:页面显示的最大宽度
const show = (posi, name, isReturn = true, langth = 100) => {
    const cur = path.find(u => u.name == name);
    if (cur) {
        isShow.value = true;
        curPopupsData.value.isReturn = isReturn;
        curPopupsData.value.curPosi = posi;
        curPopupsData.value.langth = langth;
        setTimeout(() => {
            opacity.value = 1;
        }, 10);
        switch (posi) {
            case 1:
                curPopupsData.value.contentCss = `margin-left:100%;width:${langth}%;`;
                setTimeout(() => {
                    curPopupsData.value.contentCss = `margin-left:${100 - langth}%;width:${langth}%;`;
                }, 10)
                break;
            case 3:
                curPopupsData.value.contentCss = `margin-left:-${langth}%;width:${langth}%;`;
                setTimeout(() => {
                    curPopupsData.value.contentCss = `margin-left:0%;width:${langth}%;`;
                }, 10)
                break;
        }
        curComponent.value = cur.component;
    } else {
        console.log(`popups:[${name}]不存在`);
    }
}

const hide = () => {
    const { curPosi, langth } = curPopupsData.value;
    opacity.value = 0;
    switch (curPosi) {
        case 1:
            curPopupsData.value.contentCss = 'margin-left:100%;';
            break;
        case 3:
            curPopupsData.value.contentCss = `margin-left:-${langth}%;`;
            break;
    }
    setTimeout(() => {
        isShow.value = false;
    }, duration);
}

defineExpose({
    show, hide,
})

</script>

<style scoped lang="scss">
.popups-root {
    width: 100%;
    height: calc(100% - var(--status-bar-height));
    padding-top: var(--status-bar-height);
    background-color: rgba(128, 128, 128, 0.5);
    transition-duration: 0.5s;
    overflow: hidden;


    .content {
        position: absolute;
        transition-duration: 0.3s;
        width: 100%;
        height: 100%;

        .return {
            background-color: white;
            width: 100%;
            height: 5%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(128, 128, 128, 0.5);

            .image {
                height: 24px;
                width: 24px;
                margin-left: 10px;
            }
        }

        .view {
            width: 100%;
            height: 95%;
            // background-color: white;
        }

        .view-H {
            width: 100%;
            height: 100%;
            // background-color: white;
        }
    }
}
</style>